<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-import-btn
				tips="请按照模版填写信息，姓名不能重复"
				:on-submit="onSubmit"
				:on-config="onConfig"
			/>
			<!-- <cl-filter label="筛选分类">
				<cl-select :options="dict.get('productCategory')" prop="productCategory" />
			</cl-filter> -->
			<cl-flex1 />
			<!-- 条件搜索 -->
			<cl-search ref="Search" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'product-product'
});

import { useDict } from '/$/dict';
import { useCrud, useTable, useUpsert, useSearch } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import BrandSelect from '/$/product/components/brand-select.vue';

const { service } = useCool();
const { t } = useI18n();

// 选项
const options = reactive({
	status: [
		{ label: t('在售'), value: 0, type: 'success' },
		{ label: t('下架'), value: 1, type: 'danger' }
	],
	convertType: [
		{ label: t('计算'), value: 1 },
		{ label: t('不计算'), value: 0 }
		
	]
});
const { dict } = useDict();
// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: t('商品类型'),
			prop: 'productCategory',
			component: {
				name: 'el-select',
				options: dict.get('productCategory'),
				props: {
					onChange: val => {
						if (val === 119 || val === 120 || val == 184) {
							// 如果是套餐类型，自动设置品牌、系列和型号
							Upsert.value.form.brandId = 121;
							Upsert.value.form.series = 122;
							Upsert.value.form.modelNumber = '套餐';
						} else {
							// 如果不是套餐类型，重置这些字段
							Upsert.value.form.brandId = '';
							Upsert.value.form.series = '';
							Upsert.value.form.modelNumber = '';
						}
					}
				}
			},
			span: 12,
			required: true
		},
		// {
		// 	label: t('库存类型'),
		// 	prop: 'stockCategory',
		// 	component: {
		// 		name: 'el-radio-group',
		// 		options: dict.get('stockCategory')
		// 	},
		// 	span: 12,
		// 	required: true
		// },
		{
			label: t('名称'),
			prop: 'name',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},

		// {
		// 	label: t("选择品牌"),
		// 	prop: "brandId",
		// 	component: { vm: BrandSelect },
		// 	span: 12,
		// 	required: true,
		// },

		// {
		// 	label: t('焦点'),
		// 	prop: 'focus',
		// 	hook: 'number',
		// 	component: {
		// 		name: 'el-select',
		// 		options: dict.get('focus')
		// 	},
		// 	span: 12
		// },
		{
			label: t('选择品牌'),
			prop: 'brandId',
			component: {
				name: 'el-select',
				options: dict.get('Brand')
			},
			span: 12,
			required: true
		},
		{
			label: t('系列'),
			prop: 'series',
			component: {
				name: 'el-select',
				options: dict.get('Series')
			},
			span: 12,
			required: true
		},
		{
			label: t('型号'),
			prop: 'modelNumber',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			// required: true,
			default: 0
		},
		{
			label: t('折射率'),
			prop: 'refraction',
			hook: 'number',
			component: { name: 'el-input-number', props: { min: 0 } },
			span: 12
			// required: true
		},
		// {
		// 	label: t('规格'),
		// 	prop: 'specifications',
		// 	component: { name: 'el-input', props: { clearable: true } },
		// 	span: 12,
		// 	required: true,
		// 	default: 0
		// },
		{
			label: t('视训次数'),
			prop: 'trainCount',
			hook: 'number',
			component: { name: 'el-input-number', props: { min: 0 } },
			span: 12
			// required: true
		},
		{
			label: t('赠送次数'),
			prop: 'giftCount',
			hook: 'number',
			component: { name: 'el-input-number', props: { min: 0 } },
			span: 12
			// required: true
		},

		{
			label: t('价格'),
			prop: 'price',
			hook: 'number',
			component: { name: 'el-input-number', props: { min: 0 } },
			span: 8,
			required: true
		},
		// {
		// 	label: t('库存'),
		// 	prop: 'stock',
		// 	hook: 'number',
		// 	component: { name: 'el-input-number', props: { min: 0 } },
		// 	span: 12,
		// 	required: true,
		// 	value: 1
		// },
		// {
		// 	label: t('最低库存'),
		// 	prop: 'lastStock',
		// 	hook: 'number',
		// 	component: { name: 'el-input-number', props: { min: 0 } },
		// 	span: 12,
		// 	required: true,
		// 	value: 1
		// },
		{
			label: t('商品状态'),
			prop: 'status',
			component: { name: 'el-radio-group', options: options.status },
			value: 0,
			span: 8,
			required: true
		},
		{
			label: t('转化类型'),
			prop: 'convertType',
			component: { name: 'el-radio-group', options: options.convertType },
			value: 0,
			span: 8,
			required: true
		},
		// {
		// 	label: t('单位'),
		// 	prop: 'unit',
		// 	component: {
		// 		name: 'el-select',
		// 		options: dict.get('unit')
		// 	},
		// 	span: 12
		// },
		// {
		// 	label: t('功能类型'),
		// 	prop: 'functionType',
		// 	component: {
		// 		name: 'el-select',
		// 		options: dict.get('functionType')
		// 	},
		// 	span: 12
		// },
		// {
		// 	label: t('材料'),
		// 	prop: 'material',
		// 	component: {
		// 		name: 'el-select',
		// 		options: dict.get('material')
		// 	},
		// 	span: 12
		// },
		// {
		// 	label: t('设计'),
		// 	prop: 'design',
		// 	component: {
		// 		name: 'el-select',
		// 		options: dict.get('design')
		// 	},
		// 	span: 12
		// },
		// {
		// 	label: t('膜层'),
		// 	prop: 'film',
		// 	component: {
		// 		name: 'el-select',
		// 		options: dict.get('film')
		// 	},
		// 	span: 12
		// },
		// {
		// 	label: t('拼音码'),
		// 	prop: 'unit',
		// 	component: { name: 'el-input', props: { clearable: true } },
		// 	span: 12
		// },

		// {
		// 	label: t('报警天数'),
		// 	prop: 'alarmDays',
		// 	hook: 'number',
		// 	component: { name: 'el-input-number', props: { min: 0 } },
		// 	span: 12
		// },
		{
			label: t('商品描述'),
			prop: 'description',
			component: {
				name: 'el-input',
				props: { type: 'textarea', rows: 4 }
			}
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: t('名称'), prop: 'name', minWidth: 180 },
		{ label: t('价格'), prop: 'price', minWidth: 140 },
		{ label: t('备注'), prop: 'description', showOverflowTooltip: true },
		{
			label: t('商品分类'),
			prop: 'productCategory',
			dict: dict.get('productCategory'),
			minWidth: 150
		},
		// {
		// 	label: t('库存分类'),
		// 	prop: 'stockCategory',
		// 	dict: dict.get('stockCategory'),
		// 	minWidth: 150
		// },
		// { label: t('焦点'), prop: 'focus', dict: dict.get('focus') },
		{ label: t('品牌'), prop: 'brandId', dict: dict.get('Brand') },
		{ label: t('系列'), prop: 'series', dict: dict.get('Series'), minWidth: 180 },
		{ label: t('视训次数'), prop: 'trainCount', minWidth: 140 },
		{ label: t('赠送次数'), prop: 'giftCount', minWidth: 140 },
		{ label: t('型号'), prop: 'modelNumber', minWidth: 140 },
		// { label: t('规格'), prop: 'specifications', minWidth: 140 },
		{ label: t('折射率'), prop: 'refraction', minWidth: 80 },
		{ label: t('状态'), prop: 'status', dict: options.status },
		// { label: t('库存'), prop: 'stock', minWidth: 140 },
		{ type: 'op', buttons: ['edit', 'delete'] }
	]
});

// cl-search
const Search = useSearch();

// cl-crud
const Crud = useCrud(
	{
		service: service.product.product
	},
	app => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}

// 提交事件，根据自己的情况设置格式和接口
function onSubmit(data: any, { next, done, setProgress }) {
	console.log('data', data);
	service.product.product
		.importProducts(data)
		.then(() => {
			ElMessage.success('导入成功');
			done();
			close();
			refresh();
		})
		.catch(err => {
			ElMessage.error(err.message);
			done();
		});
}
</script>
